<template>
	<!-- 审批管理  电子章   回传合同 -->
	<div class="app-container">
		<el-form :model="queryParams" id="searchForm" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="审核状态" prop="status">
				<el-select v-model="status" placeholder="请选择审核状态" clearable>
					<el-option v-for="item in dict.type.seal_status" :key="item.value" :value="item.value" class="input-width"
						:label="item.label" />
				</el-select>
			</el-form-item>
			<el-form-item label="销售经理" prop="customManager">
				<el-input v-model="queryParams.customManager" placeholder="请输入销售经理" clearable class="input-width"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="公司名称" prop="customName">
				<el-input v-model="queryParams.customName" placeholder="请输入公司名称" clearable class="input-width"
					@keyup.enter.native="handleQuery" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="setSealStatus(1)">同意</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="setSealStatus(2)">拒绝</el-button>
			</el-form-item>
		</el-form>

		<vxe-table border ref="xTable" size="mini" show-overflow :data="sealList" :column-config="{ resizable: true }"
			:checkbox-config="{ showHeader: true, visibleMethod: showCheckboxkMethod2 }" @scroll="srcollFn"
			:height="autoTableHeight" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
			<vxe-column type="checkbox" width="40"></vxe-column>
			<vxe-column field="createTime" title="申请时间" :edit-render="{}" width="125">
				<template #edit="{ row }">
					{{ row.createTime }}
				</template>
			</vxe-column>

			<vxe-column field="contractCode" title="合同" width="70">
				<template #default="{ row }">
					<el-button @click="showPdfDialog(row, true)" type="text">查看合同</el-button>
				</template>
			</vxe-column>

			<vxe-column field="status" title="状态" width="70" :edit-render="{}">
				<template #default="{ row }">
					<span :style="{ color: row.status == 1 ? '#67C23A' : row.status == 2 ? '#F56C6C' : 'black' }">{{
			formatStatus(row.status) }}</span>
				</template>
			</vxe-column>

			<vxe-column field="customManager" title="销售经理" width="80">
				<template #edit="{ row }">
					<span>{{ row.customManager }}</span>
				</template>
			</vxe-column>

			<vxe-column field="customName" title="公司名称" width="230">
				<template #edit="{ row }">
					{{ row.customName }}
				</template>
			</vxe-column>

			<vxe-column field="callName" title="联系人" width="80">
				<template #edit="{ row }">
					{{ row.callName }}
				</template>
			</vxe-column>

			<vxe-column field="updateBy" title="操作人" width="80">
				<template #edit="{ row }">
					{{ row.updateBy }}
				</template>
			</vxe-column>

			<vxe-column field="updateTime" title="操作时间" width="125">
				<template #edit="{ row }">
					{{ row.updateTime }}
				</template>
			</vxe-column>

			<vxe-column field="remark" title="备注" width="" :visible="queryParams.type == 2">
				<template #default="{ row }">
					<span>{{ row.remark }}</span>
				</template>
			</vxe-column>

		</vxe-table>
		<!-- 查看合同 -->
		<el-dialog :visible.sync="pdfDialog.show" title="查看合同">
			<div class="dialog-wrap">
				<div class="item-title">{{ pdfDialog.title }}</div>
				<div class="item-content-wrap">
					<el-scrollbar>
						<div class="item-content">
							<div class="pdf" id="pdfView"></div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listSeal, setSeal } from "@/api/system/seal";
import { openPDF } from "@/api/contract/info";
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

export default {
	name: "Seal",
	dicts: ['seal_status'],
	data() {
		return {
			autoTableHeight: 750,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 合同电子盖章表格数据
			sealList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 30,
				callName: null,
				callPhone: null,
				customName: null,
				customManager: null,
			},
			// 表单参数
			form: {},
			pdfDialog: {
				show: false,
				title: "",
			},
			pdfh5: null,
			status: '',//审核状态
			checkedSealList: [],
		};
	},
	created() {
	},
	watch: {
		// 监听路由对象中的变化
		'$route': {
			handler: function (from, to) {
				// 当路由发生变化时会调用这个函数
				this.queryParams.pageNum = 1;
				this.queryParams.pageSize = 30;
				this.queryParams.source = null;
				this.queryParams.callName = null;
				this.queryParams.callPhone = null;
				this.queryParams.customName = null;
				this.queryParams.customManager = null;
				this.queryParams.type = from.query.type;
				this.getList();
			},
			// 如果需要在路由变化时立即响应，可以设置immediate为true
			immediate: true
		}
	},
	mounted() {
		this.$nextTick(() => {
			// 视口高度 - 列表上方的元素高度
			let allHeight = window.innerHeight;
			let element = [
				document.getElementById('navbar'),
				document.getElementById('searchForm'),
				document.getElementById('tags-view-container'),
			]
			let domHeight = element.map(item => item.offsetHeight)
			// let tableHeight = allHeight - 50 - 34 - 50 - 36;
			let tableHeight = allHeight - 40 - domHeight[0] - domHeight[1] - domHeight[2];
			this.autoTableHeight = tableHeight;
		})
	},
	methods: {
		/** 查询合同电子盖章列表 */
		getList() {
			this.loading = true;
			this.queryParams.status = this.status == '' ? -1 : this.status;
			listSeal(this.queryParams).then(response => {
				this.sealList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},

		// 滚动到底部 加载下一页
		srcollFn(e) {
			let circulateNum = this.total / 30;
			let bottomOffset = e.scrollHeight - e.scrollTop - e.bodyHeight;
			if (bottomOffset < 50 && this.queryParams.pageNum < circulateNum) {
				this.loading = true;
				this.queryParams.pageNum++;
				const h = this.$createElement;
				listSeal(this.queryParams).then((response) => {
					this.infoList = [...this.infoList, ...response.rows];
					// this.total = response.total;
					this.loading = false;
				});
			}
		},
		// 根据条件显示复选框
		showCheckboxkMethod2({ row }) {
			return row.status == 0;
		},
		// 全选事件
		selectAllEvent({ checked }) {
			const records = this.$refs.xTable.getCheckboxRecords();
			this.checkedSealList = records;
		},
		// 复选框勾选事件
		selectChangeEvent({ checked }) {
			const records = this.$refs.xTable.getCheckboxRecords()
			this.checkedSealList = records;
		},
		// 查看合同
		showPdfDialog(item) {
			this.pdfDialog.show = true;
			openPDF(item.contractCode).then((response) => {
				let blob = response;
				let blobURL = window.URL.createObjectURL(blob);
				this.pdfh5 = new Pdfh5("#pdfView", {
					pdfurl: blobURL,
				});
				window.URL.revokeObjectURL(blobURL);
			});
		},
		//
		formatStatus(value) {
			if (value == 0) {
				return '待审核'
			} else if (value == 1) {
				return '已同意'
			} else if (value == 2) {
				return '已拒绝'
			}
		},
		// 同意  拒绝
		setSealStatus(value) {
			let that = this;
			if (this.checkedSealList.length <= 0) {
				this.$modal.msgError("请选择需要操作的数据！");
				return
			}
			this.$confirm('是否确认操作?', "系统提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				let ids = '';
				that.checkedSealList.forEach((item, index) => {
					if (index == 0) {
						ids += item.id;
					} else {
						ids += ',' + item.id;
					}
				})
				return setSeal(that.queryParams.type, value, ids);
			}).then(() => {
				this.$modal.msgSuccess("操作成功");
				this.getList();
			}).catch(function () { });
		}
	}
};
</script>
<style scoped>
.el-select {
	width: 100px !important;
}

.el-input .el-input--small .el-input--suffix>input {
	font-size: 10px !important;
}
</style>